$font-colorTop: #07a1e4;
$font-colorNav: #f8cc04;
$font-colorOne: #ffd200;
$font-colorTwo: #ea6b3d;
$font-colorThree: #53f2f8;
$backgring-color: #03214b;
$font-sizeSM: 14px;
$font-sizeS: 16px;
$font-sizeM: 18px;
$font-sizeL: 22px;
$font-sizeXL: 30px;

* { margin:0;padding:0;box-sizing:border-box;}
ul {  list-style: none; }
ul > li { display: inline; }

#system {
  width:100%;
  height:100%;
  min-width:1200px;
  min-height:600px;
  overflow:hidden;
  color: #fff;
  position:relative;
  font-family:"Microsoft Yahei", Arial, sans-serif;
  background:rgb(40, 30, 47) url("assets/tmp/img/bi/cgzkBackground.png") 0 0 / 100% 100% no-repeat;
}

/* layout */
.margin-t {margin-top: 10px}
.margin-l { margin-left: 20px;}
.margin-r { margin-right: 20px;}
.ptb {padding: 14px 0px}
.pt {padding-top: 10px}
.logo {width: 228px;height: 72px;}
#content-header { width: 100%;padding-top: 10px;display: flex;}
.head-logo {margin: 0 20px;}
.head-nav {background: linear-gradient(to right, rgb(5,30,72) , rgba(15,26,64,0.5));display: flex;
  .head-top{width: 160px;text-align: center;line-height: 38px;
    p {height: 38px;color: $font-colorTop;font-size: $font-sizeM;margin-bottom: 0px;}
    b {font-weight: normal;height: 38px;font-size: $font-sizeL;}
  }
}
.todaytimes {display: flex;color: #fff;font-size: $font-sizeL;text-align: center;position: absolute;right: 1%;margin-top: 5px;
  p {width: 26px;height: 32px;line-height: 32px;margin-left: 2px;background-color: $backgring-color;}
}
#content-box { position:absolute;top:105px;bottom:0px;left:20px;right:20px;}
#flexCon {
  height:97%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex-row {
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:8px 10px 10px 10px;}
.flex-cell-a{-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-cell-ar{-webkit-flex:2;-ms-flex:2;flex:2; background: url("assets/tmp/img/bi/cgA.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-al{-webkit-flex:4;-ms-flex:4;flex:4; background: url("assets/tmp/img/bi/cgB.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-b{-webkit-flex:3;-ms-flex:3;flex:3; background: url("assets/tmp/img/bi/cgC.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-c{-webkit-flex:3;-ms-flex:3;flex:3; }
.flex-cell-cr{-webkit-flex:2;-ms-flex:2;flex:2; background: url("assets/tmp/img/bi/cgD.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-cc{-webkit-flex:3;-ms-flex:3;flex:3; background: url("assets/tmp/img/bi/cgE.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-cl{-webkit-flex:2;-ms-flex:2;flex:2; background: url("assets/tmp/img/bi/cgF.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-d{-webkit-flex:3;-ms-flex:3;flex:3; background: url("assets/tmp/img/bi/cgG.png") 0 0 / 100% 100% no-repeat;}


.chart-wrapper {position:relative;height:100%;}
.chart-table { position:relative; top: 0; left:2px; display: flex; min-height: 33%;}
.title-table {display: flex;}

.main-copy {text-align: center; font-size:$font-sizeSM; color: $font-colorOne }




/* 1920/1080/1600 分辨率的显示器 */
@media (max-width:1900px) {
  .margin-l { margin-left: 15px;}
  .margin-t { margin-top: 5px;}
  #content-header { }
  #content-box {top:105px;}
  .todaytimes {
    font-size: $font-sizeM;
    p { width: 22px;height: 26px;line-height: 26px; }
  }
  .head-nav {
    .head-top {width: 123px;line-height: 36px;
      p {font-size: $font-sizeS;}
      b {font-size: $font-sizeL;}
    }
  }
  .main-copy {font-size: 12px;}

}

/*  1440 分辨率的显示器 */
@media screen and (min-width:1400px) and (max-width:1500px) {
  .head-nav {background: linear-gradient(to right, rgb(5,30,72) , rgba(15,26,64,0.5));display: flex;
    .head-top{width: 108px;
      p {font-size: 15px;}
    }
  }
  .title-table {min-height: 34%;}
}

/*  1680 分辨率的显示器 */
//@media screen and (min-width:1300px) and (max-width:1400px) {
//  .header-nav { width: 1070px;}
//  .header-top {width: 120px; p{font-size: 19px;} b{font-size: 24px;}}
//}
